<template>
  <div class="app-container">
    <div class="upStream2">
      <div class="up-top">
        <el-steps :active="2" finish-status="end" process-status='curt' class="nextnav" simple>
          <el-step title="导入文件" icon="iconfont icon-1"></el-step>
          <el-step title="保单校验" icon="iconfont icon-2"></el-step>
          <el-step title="结算完成" icon="iconfont icon-3"></el-step>
        </el-steps>
      </div>
      <div class="up-info">
        <p class="info-p1">保险公司：{{insuranceName}}</p>
        <p class="info-p2">结算周期：<span>{{salesmanBeginDate}} 到 {{salesmanEndDate}}</span> &nbsp;&nbsp;&nbsp;&nbsp;以<span>{{ruleType | ruleTypefilter}}</span>为准</p>
        <p class="info-p2">结算备注：<span>{{remarkc}}</span></p>
      </div>
      <div class="up-list">
        <div class="list-tab">
          <div class="tab" v-bind:class="{'now': now == 1}" @click='changeTab(1)'>全部保单<span>（{{guaranteeslipAllCount}}条）</span></div>
          <div class="tab" v-bind:class="{'now': now == 2}" @click='changeTab(2)'>可以结算保单<span>（{{settleCount}}条）</span></div>
          <div class="tab" v-bind:class="{'now': now == 3}" @click='changeTab(3)'>暂不结算保单<span>（{{noSettleCount}}条）</span></div>
        </div>
        <div class="list-all clearfix" v-if='now == 1'>
          <div class="all-search">
            <!-- <el-select v-model="aa" placeholder="请选择" size='mini' @change='getChange'>
						    <el-option
						      v-for="item in conditions"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						      <span style="float: left">{{ item.label }}</span>
      						  <span style="float: right; color: #999; font-size: 13px">({{ item.count }})</span>
						    </el-option>
						  </el-select> -->
            <el-tooltip placement="bottom" effect="light" v-for="(item,index) in conditions" :key="item.value">
              <span slot="content"> {{ item.txt }}</span>
              <el-button size="mini" class="mbt15" :class="{'el-button--primary':item.value == condition}" @click='getChangebtn(item.value)'>{{ item.label }}({{ item.count }})</el-button>
            </el-tooltip>
          </div>
          <div class="all-data">
            <span>政策金额：<span>{{totalCost | numFilter}}</span>元，实结合计：<span v-bind:class="{'data-red': totalCost != actionTotalCost}">{{actionTotalCost | numFilter
                }}</span>元</span>&nbsp;
            <el-tooltip placement="bottom" effect="light">
              <div slot="content">将导出 {{conditionVal}}</div>
              <!-- <el-button size='mini' @click='toImport(condition)'><i class="iconfont icon-daochu"></i>&nbsp;导出</el-button> -->
              <span @click='toImport(condition)' class="bluecolor"><i class="iconfont icon-daochu"></i>&nbsp;导出</span>
            </el-tooltip>
          </div>
        </div>
        <div class="list-all2" clearfix v-if='now != 1'>
          <div class="all-data2">
            <span>政策金额：<span>{{totalCost | numFilter}}</span>元，实结合计：<span v-bind:class="{'data-red': totalCost != actionTotalCost}">{{actionTotalCost | numFilter
                }}</span>元</span>&nbsp;
          </div>
        </div>
        <div class="list-table">
          <el-table :data="tableData" style="width: 100%" :stripe='true' ref="tables" @expand-change='toggleRowExpansion' v-loading='loading' element-loading-background="rgba(255, 255, 255, 0.3)">
            <el-table-column type="expand">
              <template slot-scope="props">

                <div class="item-content clearfix" v-if="props.row.expandData">

                  <div class="lf">
                    <p class="title1">保单匹配政策</p>
                    <p><span class="firstSpan">政策批次：</span>
                      <span class='lineS' v-if='props.row.isMatchPolicy' @click='toD(props.row.expandData.policys.batchId)'>{{props.row.expandData.policys.batchName}} <i class="iconfont icon-zhuanfa"></i></span>
                      <el-tooltip v-else-if="props.row.insuranceId && props.row.staffId" placement="bottom-start" effect="light">
                        <div slot="content">查看上游更多政策</div>
                        <router-link class="all alls" tag="a" target="_blank" :to="{ name: 'policyup', query: { insuranceId: props.row.insuranceId, staffId:props.row.staffId , time:new Date().getTime()}}">未匹配到政策
                        </router-link>
                      </el-tooltip>
                      <el-tooltip v-else placement="bottom-start" effect="light">
                        <div slot="content">查看上游更多政策</div>
                        <router-link class="all alls" tag="a" target="_blank" :to="{ name: 'policyup', query: { time:new Date().getTime()}}">未匹配到政策
                        </router-link>
                      </el-tooltip>
                    </p>
                    <p><span class="firstSpan">工&emsp;&emsp;号：</span>
                      <span v-if='props.row.expandData.policys && props.row.expandData.policys.staffs.length != 0'>
                        <span v-for='item in props.row.expandData.policys.staffs'>{{item.staffAccount}}({{item.describe}})</span></span>
                      <span v-else-if="props.row.staffAccount">{{props.row.staffAccount}}({{props.row.describe}})</span>
                      <span v-else>-</span>
                    </p>
                    <div class="divP"><span class="firstSpan">有&ensp;效&ensp;期：</span>
                      <span v-if='!props.row.expandData.policys || (!props.row.expandData.policys.effectiveDate &&  !props.row.expandData.policys.expiryDate)'>-</span>
                      <div class="setWd" v-else>
                        <span v-if='props.row.expandData.policys && props.row.expandData.policys.effectiveDate'>{{props.row.expandData.policys.effectiveDate | TenCon}}</span>
                        <span v-if='!props.row.expandData.policys || !props.row.expandData.policys.effectiveDate'>-</span>
                        到
                        <span v-if='props.row.expandData.policys && props.row.expandData.policys.expiryDate'>{{props.row.expandData.policys.expiryDate | TenCon}}</span>
                        <span v-if='props.row.expandData.policys && !props.row.expandData.policys.expiryDate'>不限</span>
                        <span v-if='!props.row.expandData.policys'>-</span>
                      </div>
                    </div>
                    <div class="divP"><span class="firstSpan">匹配政策：</span>
                      <div class='setWd'>
                        <span v-if='props.row.expandData.policys && props.row.expandData.policys.remark' class="lineS" @click='toR(props.row.expandData.policys.batchId,props.row.expandData.policys.policyId)'>{{props.row.expandData.policys.serialNumber>10?props.row.expandData.policys.serialNumber+'&nbsp;&nbsp;':'0'+props.row.expandData.policys.serialNumber+'&nbsp;&nbsp;'}}{{props.row.expandData.policys.remark}} <i class="iconfont icon-zhuanfa"></i></span>
                        <span v-else>-</span>
                      </div>
                    </div>
                    <div class="divP"><span class="firstSpan">附加奖励：</span>
                      <div class="setWd">
                        <span v-if='props.row.expandData.policys && props.row.expandData.policys.policyRewards.length != 0'>
                          <span v-for='item in props.row.expandData.policys.policyRewards' class='lineS' @click='toA(item.policyBatchId)'><span class="noDou">,</span>{{item.policyBatchName}} <i class="iconfont icon-zhuanfa"></i></span>
                        </span>
                        <span v-else>-</span>
                      </div>
                    </div>
                  </div>
                  <div class="md">
                    <p class="title1">政策预估费用</p>
                    <p><span class="firstSpan">保单手续费比例：</span><span v-if="props.row.expandData.chargeRatio=='-'&&props.row.expandData.chargeBrokerageRation=='-'&&props.row.expandData.chargeRewardRatio=='-'">-</span><span v-else>
                        <el-tooltip placement="top" effect="light">
                          <div slot="content">
                            <div>佣金：{{props.row.expandData.chargeBrokerageRation | percentFilter}}</div>
                            <div>奖励：{{props.row.expandData.chargeRewardRatio | percentFilter}}</div>
                          </div>
                          <span style="color:#151515;cursor:pointer;display:inline;">{{props.row.expandData.chargeRatio | percentFilter}}</span>
                        </el-tooltip>
                      </span>
                    </p>
                    <p><span class="firstSpan">保单手续费：</span><span v-if="props.row.expandData.charge == '-'">-</span><span v-else>{{props.row.expandData.charge | numFilter}} 元</span></p>
                    <p><span class="firstSpan">车船税佣金比例：</span><span>{{props.row.expandData.vehicleAndVesselTaxRatio | percentFilter}}</span></p>
                    <p><span class="firstSpan">车船税佣金：</span><span v-if="props.row.expandData.vehicleAndVesselTax == '-'">-</span><span v-else>{{props.row.expandData.vehicleAndVesselTax | numFilter}} 元</span></p>
                    <p><span class="firstSpan">附加奖励比例：</span><span>{{props.row.expandData.additionalRewardRatio | percentFilter}}</span></p>
                    <p><span class="firstSpan">附加奖励金额：</span><span v-if="props.row.expandData.additionalReward == '-'">-</span><span v-else>{{props.row.expandData.additionalReward | numFilter}} 元</span></p>
                  </div>
                  <div class="rh">
                    <p class="title1">上游实结费用</p>
                    <p><span class="firstSpan">保单手续费比例：</span><span>{{props.row.expandData.actionChargeRatio | percentFilter}}</span></p>
                    <p><span class="firstSpan">保单手续费：</span><span v-if="props.row.expandData.actionCharge == '-'">-</span><span v-else>{{props.row.expandData.actionCharge | numFilter}} 元</span></p>
                    <p><span class="firstSpan">车船税佣金比例：</span><span>{{props.row.expandData.actionVehicleAndVesselTaxRatio | percentFilter}}</span></p>
                    <p><span class="firstSpan">车船税佣金：</span><span v-if="props.row.expandData.actionVehicleAndVesselTax == '-'">-</span><span v-else>{{props.row.expandData.actionVehicleAndVesselTax | numFilter}} 元</span></p>
                    <p><span class="firstSpan">附加奖励比例：</span><span>{{props.row.expandData.actionAdditionalRewardRatio | percentFilter}}</span></p>
                    <p><span class="firstSpan">附加奖励金额：</span><span v-if="props.row.expandData.actionAdditionalReward == '-'">-</span><span v-else>{{props.row.expandData.actionAdditionalReward | numFilter}} 元</span></p>
                  </div>

                </div>

                <div class="item-content clearfix" v-else style='text-align:center'>加载中...</div>
              </template>
            </el-table-column>
            <el-table-column width='55'>
              <template slot-scope='scope'>
                <span v-if='scope.row.guaranteeSlipType == 1' class="edspan1">商</span>
                <span v-if='scope.row.guaranteeSlipType == 2' class="edspan2">交</span>
              </template>
            </el-table-column>
            <el-table-column label='保单信息'>
              <template slot-scope='scope'>
                <p class="info-p1">

                  <span v-if='scope.row.guaranteeSlipNumber'>
                    <span v-if="scope.row.guaranteeSlipTempType==5" :title='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
                    <span v-else class="lineG" @click='toG(scope.row.guaranteeSlipId)' :title='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
                  </span>
                  <span v-if='!scope.row.guaranteeSlipNumber'>-</span>
                  
                </p>
                <p class="info-p2">
                  <el-tooltip v-if='scope.row.insuranceName' placement="bottom-start" effect="light">
                    <div slot="content">{{scope.row.staffAccount}}({{scope.row.describe}})</div>
                    <span style="vertical-align:top;">{{scope.row.insuranceName}}</span>
                  </el-tooltip>

                  <span v-if='!scope.row.insuranceName'>-</span>
                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                  <span v-if='scope.row.plateNumber'>{{scope.row.plateNumber}}</span>
                  <span v-if='!scope.row.plateNumber'>-</span>
                  <!-- <template v-if="scope.row.applicantName!==null && scope.row.applicantName!==''">

                    <span v-if='scope.row.applicantName.length<=6'>{{scope.row.applicantName}}</span>
                    <el-tooltip v-if='scope.row.applicantName.length>6' class="item" effect="light" :content="scope.row.applicantName" placement="bottom">
                      <span style="cursor: pointer;">{{scope.row.applicantName | sixCon}}</span>
                    </el-tooltip>
                    <span v-if='!scope.row.applicantName'>-</span>
                  </template> -->
                </p>
              </template>
            </el-table-column>
            <el-table-column label="业务归属" width='160'>
              <template slot-scope='scope'>
                <p class="info-p1" v-if='scope.row.salesmanName'>{{scope.row.salesmanName}}</p>
                <p class="info-p1" v-if='!scope.row.salesmanName'>-</p>
                <el-tooltip placement="bottom-start" effect="light">
                  <div slot="content">{{scope.row.salesmanOrganzationName}}</div>
                  <p class="info-p2" v-if='scope.row.salesmanOrganzationName'>{{scope.row.salesmanOrganzationName | lastname}}</p>
                </el-tooltip>
                <p class="info-p2" v-if='!scope.row.salesmanOrganzationName'>-</p>
              </template>
            </el-table-column>
            <el-table-column :render-header='fee' width='155' align='right'>
              <template slot-scope='scope'>
                <p class="info-p3">
                  <span v-if='scope.row.totalVehicleAndVesselTax != 0'>{{scope.row.totalVehicleAndVesselTax | numFilter}}</span>
                  <span v-if='scope.row.totalVehicleAndVesselTax == 0'>0.00</span>
                  <span v-if='scope.row.totalVehicleAndVesselTax == null'>-</span>
                  <span v-if='scope.row.totalPremium != 0'>&nbsp;/&nbsp;{{scope.row.totalPremium | numFilter}}</span>
                  <span v-if='scope.row.totalPremium == 0'>&nbsp;/&nbsp;0.00</span>
                  <span v-if='scope.row.totalPremium == null'>&nbsp;/&nbsp;-</span>
                </p>
                <p class="info-p1" v-if='scope.row.totalNetPremium != 0'>{{scope.row.totalNetPremium | numFilter}}</p>
                <p class="info-p1" v-if='scope.row.totalNetPremium == 0'>0.00</p>
                <p class="info-p1" v-if='scope.row.totalNetPremium == null'>-</p>
              </template>
            </el-table-column>
            <el-table-column label="政策费用" width='120' align='right'>
              <template slot-scope='scope'>
                <p class="info-p3">
                 <span class='setFont' v-if='scope.row.totalCost != 0'>{{scope.row.totalCost | numFilter}}</span>
                <span class='setFont' v-if='scope.row.totalCost == 0'>0.00</span>
                 <span class='setFont' v-if='scope.row.totalCost == null'>-</span>
                </p>
                <!-- <p class="info-p1" v-if='scope.row.chargeRatio != null'>{{scope.row.chargeRatio*100 | percentFilter2}}</p>
                <p class="info-p1" v-if='scope.row.chargeRatio == 0'>0.00%</p>
                <p class="info-p1" v-if='scope.row.chargeRatio == null'>-</p> -->
              </template>
            </el-table-column>
            <el-table-column label="实结费用" width='120' align='right'>
              <template slot-scope='scope'>
                <p class="info-p3">
                 <span class='setFont' v-if='scope.row.activeTotalCost != 0' v-bind:class="{'setR':scope.row.activeTotalCost != scope.row.totalCost}">{{scope.row.activeTotalCost | numFilter}}</span>
                 <span class='setFont' v-if='scope.row.activeTotalCost == 0' v-bind:class="{'setR':scope.row.activeTotalCost != scope.row.totalCost}">0.00</span>
                 <span class='setFont' v-if='scope.row.activeTotalCost == null'>-</span>
                </p>
                <!-- <p class="info-p1" v-if='scope.row.aChargeRatio != null'>{{scope.row.aChargeRatio*100 | percentFilter2}}</p>
                <p class="info-p1" v-if='scope.row.aChargeRatio == 0'>0.00%</p>
                <p class="info-p1" v-if='scope.row.aChargeRatio == null'>-</p> -->
              </template>
            </el-table-column>
            <el-table-column label="是否结算" width='80' align='right'>
              <template slot-scope='scope'>
                <span v-if='scope.row.guaranteeSlipTempType == 3' style="color:#CF1322;">已结算</span>
                <el-tooltip v-else :content="scope.row.isSettlement? '可以结算':'暂不结算'" placement="top">
                  <el-switch v-model="scope.row.isSettlement" active-color="#87D068" inactive-color="#CCCCCC" @change='switchtoggle(scope.row.id)'>
                  </el-switch>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column label="操作" width='80' type='index' align='right'>
              <template slot-scope='scope'>
                <!-- <a class="remark">备注</a> -->
                <el-popover placement="bottom-end" v-model="scope.row.isshow" trigger="click" @show='changeR(scope.row.remark)'>
                  <textarea class="setText" placeholder="请在此输入备注" v-model='scope.row.remark'></textarea>
                  <div style="text-align: right; margin: 15px 0 0;">
                    <el-button size="mini" @click="fresh(scope.row)">取消</el-button>
                    <el-button type="primary" size="mini" @click='saveremark(scope.row)'>保存</el-button>
                  </div>
                  <a class="remark" slot="reference">备注</a>
                </el-popover>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="list-page">
          <el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="10" layout="total,prev, pager, next,jumper" :total="pagetotal"></el-pagination>
        </div>
      </div>
      <div class="up-btn">
        <el-button size='small' class='wd100' @click='toupstep()'>上一步</el-button>
        <el-button size='small' type='primary' class='wd100' @click='tosettle()' v-if='btnShow' :loading='isloading'>结算</el-button>
        <el-dialog title="确认" :visible.sync="dialogVisible" width='500px' :close-on-click-modal='false'>
          <p style="text-align: left;margin-top:0;">请确认以下结算信息是否正确：</p>
          <table class="settletable" border="1" cellpadding="6" cellspacing="0" v-loading='dialogLoading'>
            <tr>
              <td width="25%"></td>
              <td width="25%">条数</td>
              <td width="25%">政策金额</td>
              <td width="25%">实结金额</td>
            </tr>
            <tr>
              <td style="text-align:left;">共搜索保单</td>
              <td>{{settleTableData.totalCount}}</td>
              <td>{{settleTableData.exportTotalCost | numFilter}}</td>
              <td>{{settleTableData.exportATotalCost | numFilter}}</td>
            </tr>
            <tr class="setB">
              <td style="text-align:left;">本次结算保单</td>
              <td>{{settleTableData.salesmanCount}}</td>
              <td>{{settleTableData.salesmanTotalCost | numFilter}}</td>
              <td>{{settleTableData.salesmanATotalCost | numFilter}}</td>
            </tr>
            <tr>
              <td style="text-align:left;">暂未结算保单</td>
              <td>{{settleTableData.notSalesmanCount}}</td>
              <td>{{settleTableData.notSalesmanTotalCost | numFilter}}</td>
              <td>{{settleTableData.notSalesmanActionTotalCost | numFilter}}</td>
            </tr>
          </table>
          <div>
            <el-button size='mini' class='wd130' @click='dialogVisible = false'>暂不结算</el-button>
            <el-button size='mini' type='primary' class='wd130' @click='upsettle()' :loading="isokLoading">正确，马上结算</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
export default {
  data() {
    return {
      tooltipVal: "否",
      id: null,
      now: 1,
      isloading: false,
      visible2: false,
      condition: 0,
      conditionVal: null,
      conditions: [
        {
          value: 0,
          count: 0,
          label: "全部",
          txt: "包括导入的保单数据和已经录入系统的保单数据"
        },
        {
          value: 1,
          count: 0,
          label: "正常",
          txt: "系统中能够查询到导入文件保单，且实结金额与政策金额一致的保单"
        },
        {
          value: 2,
          count: 0,
          label: "异常",
          txt: "系统中能够查询到导入文件保单，但实结金额与政策金额不一致的保单"
        },
        {
          value: 3,
          count: 0,
          label: "已结算",
          txt: "在查询的结算周期内，已经完成上游结算的保单"
        },
        {
          value: 6,
          count: 0,
          label: "无匹配政策",
          txt: "系统中有的保单，但没有匹配上政策的保单"
        },
        {
          value: 4,
          count: 0,
          label: "无结算信息",
          txt: "在查询的结算周期内，系统中有该保单号，但导入文件中没有该保单号"
        },
        {
          value: 5,
          count: 0,
          label: "未登记",
          txt:
            "在查询的结算周期内，导入文件中有该保单号，但系统中没有该保单号的"
        },

        {
          value: 7,
          count: 0,
          label: "不在结算周期内",
          txt:
            "导入的文件和系统中都有该保单号，但该保单号结算时间没有在结算周期内"
        }
      ],
      tableData: [],
      currentPage: 1,
      pagetotal: null,
      rowId: null,
      isSettlement: null,
      // 得到行的id
      getRowKeys(row) {
        return row.id;
      },
      expands: [], // 要展开的行，数值的元素是row的key值
      expandData: [],
      dialogVisible: false,
      remarkc: "",
      settleTableData: {},
      noSettleCount: 0,
      settleCount: 0,
      guaranteeslipAllCount: 0,
      totalCost: 0,
      actionTotalCost: 0,
      guaranteeslipAllCount: 0,
      settleCount: 0,
      noSettleCount: 0,
      btnShow: true,
      loading: false,
      expandLoading: false,
      dialogLoading: false,
      isokLoading: false,
      salesmanEndDate: "",
      insuranceName: "",
      salesmanBeginDate: "",
      ruleType:""
    };
  },
  mounted() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
    }
    this.getList();
    // this.getDetail();
  },
  computed: {
    aa() {
      this.getCondition(this.condition);
      return (
        this.conditions[this.condition].label +
        "(" +
        this.conditions[this.condition].count +
        ")"
      );
    }
  },
  filters: {
  	ruleTypefilter(val){
  		if(val==1){
  			return "核保日期"
  		}else if(val==2){
  			return "支付日期"
  		}else if(val==3){
  			return "签单日期"
  		}else{
  			return "录入日期"
  		}
  	},
    numFilter(val) {
      // 截取当前数据到小数点后两位
      // let realVal = Number(val).toFixed(2)
      // num.toFixed(2)获取的是字符串
      // return Number(realVal)
      if (val || val == 0) {
        val = val.toString().replace(/\$|\,/g, "");
        if (isNaN(val)) {
          val = "0";
        }
        let sign = val == (val = Math.abs(val));
        val = Math.floor(val * 100 + 0.50000000001);
        let cents = val % 100;
        val = Math.floor(val / 100).toString();
        if (cents < 10) {
          cents = "0" + cents;
        }
        for (var i = 0; i < Math.floor((val.length - (1 + i)) / 3); i++) {
          val =
            val.substring(0, val.length - (4 * i + 3)) +
            "," +
            val.substring(val.length - (4 * i + 3));
        }

        return (sign ? "" : "-") + val + "." + cents;
      }
    },
    percentFilter2(val){
      if(val||val==0){
        val = val.toFixed(2);
        return val+'%'
      }else{
        return '-'
      }
    },
    percentFilter(val) {
      if (val && val != "-") {
        console.log(val);
        val = parseFloat(val.substring(0, val.length - 1));
        val = val.toFixed(2);
        return val + " %";
      } else {
        return "-";
      }
    },
    lastname(val) {
      let index = val.lastIndexOf("-");
      if (index !== "-1") {
        let sli = val.substr(index + 1, val.length);
        return sli;
      }
    },
    sixCon(val) {
      let aa = val;
      if (val.length > 6) {
        aa = val.substr(0, 6) + "...";
      }
      return aa;
    },
    TenCon(val) {
      let aa = val;
      if (val.length > 16) {
        aa = val.substr(0, 16);
      }
      return aa;
    }
  },
  methods: {
    // 保存备注值
    changeR(val) {
      this.oldremark = val;
      console.log(this.oldremark);
    },
    // 切换之后操作
    toggleRowExpansion(row) {
      // console.log(this.$refs.tables)
      if (this.expands[0] != row.id) {
        this.expands = [];
        this.expands.push(row.id);
        console.log(row);
        this.getDetail(row);
      } else {
        this.expands = [];
      }
      // let data = this.expandData;
      // if(data.length !== 0){
      // 	if(data.findIndex(item => item.id ==row.id) == -1){//在数组中能找到
      // 	  this.getDetail(row.id);
      // 	}
      // }else{
      // 	this.getDetail(row.id);
      // }
    },
    // 设置表头
    fee() {
      return (
        <div class="setC">
          <p>车船税 / 含税保费</p>
          <p>不含税保费</p>
        </div>
      )
    },
    fee1() {
      return (
      <div class="setC">
        <p>政策费用</p>
        <p>应结保单手续费比例</p>
      </div>
      )
    },
    fee2() {
      return (
      <div class="setC">
        <p>实结费用</p>
        <p>实结保单手续费比例</p>
      </div>
    )
    },
    // 得到condition的值
    getCondition(val) {
      this.conditionVal = this.conditions[val].label;
    },
    // tab切换
    changeTab(val) {
      this.now = val;
      let isSettlement;
      this.currentPage = 1;
      if (val == 1) {
        isSettlement = null;
      } else if (val == 2) {
        isSettlement = 1;
      } else if (val == 3) {
        isSettlement = 0;
      }
      this.isSettlement = isSettlement;

      // let tableData = this.tableData;
      //   let ndata = JSON.stringify(tableData);
      //   this.tableData = JSON.parse(ndata);
      this.getList(null, isSettlement);
    },
    // 开关切换
    switchtoggle(val) {
      console.log(val);
      if (
        this.tableData.length == 1 &&
        this.currentPage != 1 &&
        this.now != 1
      ) {
        this.currentPage = this.currentPage - 1;
      }
      let params = {
        id: val
      };
      this.post(params, "services/app/settle/UpdateIsSettlement").then(rs => {
        if (rs.success) {
          console.log(rs.result);
          this.getList(this.currentPage, this.condition, this.isSettlement);
        }
      });
    },
    // 下拉选择
    getChange(val) {
      if (val || val == 0) {
        this.condition = val;
        this.getList(this.currentPage, this.condition, this.isSettlement);
      }
    },
    getChangebtn(val) {
      console.log(val);
      if (val || val == 0) {
        this.condition = val;
        this.currentPage = 1;
        this.getList(this.currentPage, this.condition, this.isSettlement);
      }
    },
    // 导出
    toImport(val) {
      let params = {
        queryType: val,
        batchId: this.id
      };
      this.post(params, "services/app/settle/ExportSettlementUpperList").then(
        rs => {
          if (rs.success) {
            console.log(rs.result);
            if (rs.result.state == 0) {
              window.location.href = process.env.BASE_DOWN + rs.result.filePath;
            } else if (rs.result.state == 1) {
              this.$notify.error({
                title: "失败",
                message: rs.result.errorMessage
                //duration: 0,
              });
            } else if (rs.result.state == 2) {
              this.$notify.error({
                title: "失败",
                message: "该批次下没有要下载的数据"
                //duration: 0,
              });
            }
          }
        }
      );
    },
    // 表格信息
    getList(pageindex, condition, isSettlement) {
      const _this = this;
      _this.loading = true;
      let params = {};
      if (condition) {
        _this.condition = condition;
        this.getCondition(this.condition);
      } else {
        _this.condition = 0;
        this.getCondition(this.condition);
      }
      if (_this.isSettlement || _this.isSettlement == 0) {
        params = {
          pageindex: _this.currentPage,
          isSettlement: _this.isSettlement,
          batchId: _this.id
        };
      } else {
        if (pageindex) {
          params = {
            pageIndex: pageindex,
            batchId: _this.id,
            queryType: _this.condition
          };
        } else if (isSettlement || isSettlement == 0) {
          params = {
            isSettlement: isSettlement,
            batchId: _this.id
          };
        } else if (pageindex && (isSettlement || isSettlement == 0)) {
          params = {
            pageIndex: pageindex,
            isSettlement: isSettlement,
            batchId: _this.id
          };
        } else {
          params = {
            batchId: _this.id,
            queryType: _this.condition
          };
        }
      }
      // console.log('====================');
      // console.log(params);
      this.post(params, "services/app/settle/GetGuaranteeSlipTempList").then(
        rs => {
          if (rs.success) {
            console.log(rs);
            _this.loading = false;
            if (rs.result.guaranteeslipAllCount == 0) {
              this.btnShow = false;
            } else {
              this.btnShow = true;
            }
            let data = rs.result.items;
            data.forEach(item => {
              item.isshow = false;
              if (item.remark == "") {
                item.remark = rs.result.remark;
              }
            });
            this.tableData = data;
            // console.warn(this.tableData);
            // console.warn('----------------------------//////////////////');
            this.ruleType=rs.result.ruleType
            this.pagetotal = rs.result.totalCount;
            this.totalCost = rs.result.totalCost; //应结
            this.actionTotalCost = rs.result.actionTotalCost; //实结
            this.insuranceName = rs.result.insuranceName; //保险公司
            this.salesmanBeginDate = rs.result.salesmanBeginDate; //开始时间
            this.salesmanEndDate = rs.result.salesmanEndDate; //结束时间
            this.remarkc = rs.result.remark; //备注
            this.guaranteeslipAllCount = rs.result.guaranteeslipAllCount; //全部结算数量
            this.settleCount = rs.result.settleCount; //可以结算数量
            this.noSettleCount = rs.result.noSettleCount; //暂不结算数量
            // this.notIsMatchPolicyCount  = rs.result.notIsMatchPolicyCount ;//没有匹配上政策的数据 queryType  6:,
            // this.notIsInTimeFrameCount = rs.result.notIsInTimeFrameCount;//没有在时间范围内的数据queryType  7

            this.conditions[0].count = rs.result.guaranteeslipAllCount;
            this.conditions[1].count = rs.result.guaranteeslipNormalCount;
            this.conditions[2].count = rs.result.guaranteeslipAbnormalCount;
            this.conditions[3].count = rs.result.guaranteeslipSettledCount;
            this.conditions[5].count = rs.result.guaranteeslipNoSettledCount;
            this.conditions[6].count = rs.result.guaranteeslipNoRecordCount;
            this.conditions[4].count = rs.result.notIsMatchPolicyCount; //没有匹配上政策的数据 queryType  6:,
            this.conditions[7].count = rs.result.notIsInTimeFrameCount; //没有在时间范围内的数据queryType  7
            if (condition) {
              this.condition = condition;
            } else {
              this.condition = 0;
            }
            this.expands = [];
          }
        }
      );
    },
    // 信息详情
    getDetail(val) {
      let params = {
        id: val.id
        // id:'ceb6fd8c-1fd7-46dc-bc54-ad93e60b29a0'
      };
      this.expandLoading = true;
      // console.log(params);
      this.post(
        params,
        "services/app/settle/GetSettleGuaranteeDetailInfo"
      ).then(rs => {
        this.expandLoading = false;
        if (rs.success) {
          Vue.set(val, "expandData", rs.result);
          //   data.id =id
          //   // this.expandData = rs.result;
          //   this.expandData.push(data);
        } else {
          this.$notify.error({
            title: "错误",
            message: rs.error.message,
            customClass: "el-notification-error"
          });
        }
      });
    },
    //页码
    handleCurrentChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = val;
      this.getList(val, this.condition, this.isSettlement);
    },
    // 取消
    fresh(obj) {
      obj.isshow = false;
      console.log(obj);
      const _this = this;
      this.tableData.forEach(item => {
        if (item.id == obj.id) {
          // obj.remark = item.remark;
          Vue.set(obj, "remark", _this.oldremark);
          // console.log(obj.remark);
        }
      });
    },
    // 备注
    saveremark(obj) {
      // Vue.set(obj,'isshow',false);
      obj.isshow = false;
      let params = {
        id: obj.id,
        remark: obj.remark
      };
      console.log(params);
      this.post(params, "services/app/settle/UpdateIsRemark").then(rs => {
        if (rs.success) {
          if (rs.result.state == 0) {
            this.$notify({
              title: "成功",
              message: "保存成功",
              type: "success",
              customClass: "el-notification-success"
            });
          }
          this.getList(this.currentPage, this.condition, this.isSettlement);
        }
      });
    },
    // 政策批次
    toD(id) {
      let routeData = this.$router.resolve({
        name: "policyupper3c_list",
        query: {
          batchId: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 附加
    toA(id) {
      let routeData = this.$router.resolve({
        name: "policyupper3c_list",
        query: {
          batchId: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 备注
    toR(bid, pid) {
      let routeData = this.$router.resolve({
        name: "policyupedit",
        query: {
          batchId: bid,
          policyId: pid,
          stream: 1,
          filterType: 1,
          status: 2
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 保单
    toG(id) {
      console.log(id);
      let routeData = this.$router.resolve({
        name: "policydetail",
        params: {
          id: id
        }
      });
      window.open(routeData.href, "_blank");
    },
    // 上一步
    toupstep() {
      const _this = this;
      this.$confirm(
        "返回上一步，该页面的操作将会重置，确定要返回上一步？"
      ).then(() => {
        _this.$router.push({
          name: "uppersettle1"
        });
      });
    },
    // 结算信息
    tosettle() {
      this.dialogVisible = true;
      this.dialogLoading = true;
      let params = {
        // id :'8b8e91dd-169c-4e22-9a69-a17976641a74'
        id: this.id
      };
      this.post(params, "services/app/settle/GetGuaranteeSlipTempStat").then(
        rs => {
          this.dialogLoading = false;
          if (rs.success) {
            this.isloading = false;
            this.settleTableData = rs.result;
          } else {
            this.$notify.error({
              title: "错误",
              message: rs.error.message,
              customClass: "el-notification-error"
            });
          }
        }
      );
    },
    // 结算
    upsettle() {
      this.isokLoading = true;
      const _this = this;
      let params = {
        // settlementBatchId :'8b8e91dd-169c-4e22-9a69-a17976641a74'
        settlementBatchId: this.id
      };
      this.post(params, "services/app/settle/UpperSettlement").then(rs => {
        this.isokLoading = false;
        this.dialogVisible = false;
        if (rs.success) {
          console.log(rs.result);
          this.$router.push({
            name: "uppersettle3",
            query: {
              id: _this.id
            }
          });
        } else {
          this.$notify.error({
            title: "错误",
            message: rs.error.message,
            customClass: "el-notification-error"
          });
        }
      });
    }
  }
};
</script>
<style lang='scss' scoped>
.bgcolor {
  background-color: #ee6000;
}
.bluecolor {
  color: #027dca;
  font-size: 16px !important;
  border-bottom: 1px solid #027dca;
  cursor: pointer;
}
.setFont {
  font-size: 16px;
}
.setWd {
  // min-width:172px;
  width: 76%;
  display: inline-block;
}
.lineS:hover {
  color: #027dca !important;
  cursor: pointer;
  border-bottom: 1px solid #027dca;
}
.noDou:first-child {
  display: none;
}
.lineG {
  color: #027dca !important;
  cursor: pointer;
  min-width: 200px;
}
.setText {
  border-radius: 5px;
  border-color: #d9d9d9;
  height: 60px;
  width: 233px;
  padding: 5px;
}
textarea[class="setText"]::-webkit-input-placeholder {
  color: #cbcbcb;
  font-size: 13px;
}
.setR {
  color: #cf1322;
}
.wd100 {
  width: 100px;
}
.wd130 {
  width: 130px;
}
.setC {
  font-size: 12px;
  padding: 0;
  p {
    padding: 0;
    margin: 0;
    line-height: 18px;
    text-align: right;
  }
}
.app-container {
  .upStream2 {
    width: 100%;
    .up-top {
      margin-top: 55px;
      padding: 0 20px;
      margin-bottom: 50px;
    }
    .up-info {
      padding: 0 25px;
      margin-top: 50px;
      .info-p1 {
        font-size: 20px;
        color: #333;
        line-height: 28px;
      }
      .info-p2 {
        font-size: 12px;
        color: #666;
        line-height: 17px;
        span {
          color: #40819e;
        }
      }
    }
    .up-list {
      width: 100%;
      .list-tab {
        padding: 0 20px;
        box-border: border;
        border-bottom: 1px solid #cbcbcb;
        .tab {
          display: inline-block;
          padding: 0 10px;
          line-height: 40px;
          text-align: center;
          color: #333;
          cursor: pointer;
          margin-bottom: -1px;
          span {
            color: #999;
          }
        }
        .now {
          color: #ff7819 !important;
          background: url(../../../assets/images/bomactive2x.png) center 32px
            no-repeat;
          span {
            color: #ff7819 !important;
          }
        }
      }
      .list-all {
        padding: 14px 20px;
        .all-search {
          display: inline-block;
        }
        .all-data {
          // float:right;
          color: #666666;
          // display:inline-block;
          // margin-top: 10px;
          span {
            font-size: 13px;
            .data-red {
              color: #cf1322;
            }
          }
        }
      }
      .list-all2 {
        height: 56px;
        box-sizing: border-box;
        padding: 14px 20px;
        .all-data2 {
          float: right;
          color: #666666;
          display: inline-block;
          line-height: 28px;
          span {
            font-size: 13px;
            .data-red {
              color: #cf1322;
            }
          }
        }
      }
      .list-table {
        padding: 0 20px;
        .lf,
        .md {
          width: 35%;
          float: left;
          padding-right: 2%;
          .title1 {
            color: #40819e;
            font-size: 14px;
            line-height: 20px;
            margin: 14px 0;
          }
          p {
            margin: 10px 0;
            .firstSpan {
              display: inline-block;
              width: 67px;
              color: #999999;
              font-size: 13px;
              line-height: 18px;
            }
            span {
              color: #151515;
              font-size: 13px;
              line-height: 18px;
            }
          }
          .divP {
            margin: 10px 0;
            .firstSpan {
              display: inline-block;
              width: 67px;
              color: #999999;
              font-size: 13px;
              line-height: 18px;
              vertical-align: top;
            }
            span {
              color: #151515;
              font-size: 13px;
              line-height: 18px;
            }
          }
        }
        .md {
          padding-left: 4%;
          padding-right: 4%;
          width: 33%;
          border-right: 1px solid #cbcbcb;
          border-left: 1px solid #cbcbcb;
          p {
            span:first-child {
              display: inline-block;
              width: 110px;
              color: #999999;
              font-size: 13px;
            }
          }
        }
        .rh {
          margin-left: 4%;
          width: 27%;
          float: left;
          .title1 {
            color: #40819e;
            font-size: 14px;
            line-height: 20px;
            margin: 14px 0;
          }
          p {
            margin: 10px 0;
            line-height: 18px;
            span:first-child {
              display: inline-block;
              width: 110px;
              color: #999999;
              font-size: 13px;
            }
            span {
              color: #151515;
            }
          }
        }
        .edspan1 {
          display: inline-block;
          width: 25px;
          height: 25px;
          background: #39b96c;
          border-radius: 6px;
          color: #fff;
          font-size: 14px;
          text-align: center;
        }
        .edspan2 {
          display: inline-block;
          width: 25px;
          height: 25px;
          background: #3c8cbd;
          border-radius: 6px;
          color: #fff;
          font-size: 14px;
          text-align: center;
        }
        .info-p1 {
          font-size: 13px;
          color: #333;
          line-height: 18px;
          margin: 0 0 3px 0;
          span:first-child {
            // display: inline-block;
            // text-overflow: ellipsis;
            // overflow: hidden;
            // width: 86%;
            // max-width: 180px;
            // white-space: nowrap;
          }
          span:nth-child(2) {
            display: inline-block;
          }
        }
        .info-p2 {
          font-size: 13px;
          color: #666;
          margin: 3px 0 0 0;
          line-height: 18px;
          display: inline-block;
          // span:first-child {
          //   display: inline-block;
          //   min-width: 100px;
          // }
        }
        .info-p3 {
          font-size: 13px;
          color: #666;
          margin: 3px 0 0 0;
          line-height: 18px;
        }
        a {
          color: #027dca;
        }
      }
      .list-page {
        margin: 55px 0 20px 0;
        text-align: right;
        padding: 0 20px;
      }
    }
    .up-btn {
      text-align: center;
      margin-bottom: 50px;
    }
    .settletable {
      border: 1px solid #efefef;
      text-align: right;
      width: 100%;
      margin-bottom: 20px;
      .setB {
        font-weight: 700;
      }
      td {
        border: 1px solid #efefef;
      }
    }
  }
}
.mbt15 {
  margin-bottom: 8px;
  margin-right: 10px;
  margin-left: 0;
}
</style>